/**
 * 命令式组件  历史
 * @param {number} id
 * @param {String} remark
 * @param {number} statusId
 */
import { createApp, ref } from "vue"; // createElementVNode
import { ElDialog, ElScrollbar } from "element-plus";
import { Dict } from "@/api/interface/index";
import "./history.scss";
interface optionsParams {
  id: string;
  remark: string;
  typeId: string;
  list: Dict.ResDictList[];
  flag: String;
  getTableList: (data: any) => void;
}
const historyHandle = async function (params: optionsParams) {
  let isShow = ref(false);
  const urlResource = window?.staticConfig?.urlResource;
  let div = document.createElement("div");
  let body = document.querySelector("body");
  body?.append(div);
  const options = {
    name: "review",
    render: ctx => {
      console.log(ctx);
      // 处理当前值是否存在
      // params.typeId = params.list && params.list.filter(item => item.id).includes(params.typeId) ? params.typeId : "";
      // const drawerProps = ref({
      //   id: params.id,
      //   remark: params.remark,
      //   list: params.list,
      //   typeId: params.typeId,
      //   flag: params.flag
      // });
      // const cancelHandle = () => {
      //   ctx.$emit("cancel");
      // };
      // const commitHandle = () => {
      //   ctx.$refs.ruleFormRef.validate(async valid => {
      //     console.log(valid);
      //     if (!valid) return;
      //     ctx.$emit("commit", drawerProps.value);
      //   });
      // };
      console.log(params.listAllUser);
      return (
        <ElDialog model-value={isShow} title="变更历史" style="width:60vw; height: 50vh">
          <div style="height:40vh;overflow:hidden">
            <ElScrollbar>
              {params.list.length ? (
                params.list.map(item => {
                  return (
                    <>
                      <div class="history-m">
                        <div class="history-left">
                          <img src={urlResource + params.listAllUser.find(itm => itm.id === item.createBy)?.avatarUrl} alt="" />
                          <span>{params.listAllUser.find(itm => itm.id === item.createBy)?.name || "'--"}</span>
                        </div>
                        <div class="history-right">
                          <p>
                            <span>变更了</span>
                            <span>{params.getDictItem("orderReasonType", item.changeType)}</span>
                          </p>
                          <div class="ts">
                            <p>
                              <span>原始内容</span>
                              <span>
                                {item.changeType === "1815979981105266688"
                                  ? params.listAllUser.find(itm => itm.id == item.originalData)?.name
                                  : item.originalData}
                              </span>
                            </p>
                            <p>
                              <span>更新内容</span>
                              <span>
                                {item.changeType === "1815979981105266688"
                                  ? params.listAllUser.find(itm => itm.id == item.modifiedData)?.name
                                  : item.modifiedData}
                              </span>
                            </p>
                            <p>
                              <span>变更原因</span>
                              <span>{params.getDictItem("orderReason", item.reason)}</span>
                            </p>
                            <p>
                              <span>记录时间</span>
                              <span>{item.gmtCreate}</span>
                            </p>
                          </div>
                          <p>
                            <span>备注</span>
                            <span>{item.reasonDetail}</span>
                          </p>
                        </div>
                      </div>
                    </>
                  );
                })
              ) : (
                <div>暂无变更记录</div>
              )}
            </ElScrollbar>
          </div>
        </ElDialog>
      );
    }
  };
  let app = createApp(options, {
    isShow,
    id: params.id,
    remark: params.remark,
    typeId: params.typeId,
    list: params.list,
    flag: params.flag,
    getDictItem: params.getDictItem,
    listAllUser: params.listAllUser || [],
    onClose() {
      isShow.value = false;
      app.unmount();
      div.remove();
    },
    onOpen() {
      isShow.value = true;
    },
    onCancel() {
      isShow.value = false;
      app.unmount();
      div.remove();
    }
  });
  app.mount(div);
};

export default historyHandle;
